import { PoweroffOutlined, RightOutlined, UserOutlined } from "@ant-design/icons"
import { identity, store as StoreApi } from "@mall/api-services"
import { Avatar, Button, Card, Col, List, Popover, Row, Space, Statistic, Tag } from "antd"
import * as React from "react"
import { useEffect, useState } from "react"
import { Link, useParams } from "react-router-dom"
import Page from "../../components/page"
import classes from "./index.module.scss"
import TotalOverview from "./total-overview"
import { TotalProductQuantity } from "./total-quantity"

const Store = StoreApi.Store
const StoreServiceV1 = StoreApi.StoreServiceV1


interface UserAvatarProps {
  store: StoreApi.Store
}

function UserAvatar(props: UserAvatarProps) {
  const { store } = props
  const [user, setUser] = useState(new identity.User())
  useEffect(() => {
    identity.UserServiceV1.getCurrentUser().then(setUser)
  }, [])

  const popoverContent = (
    <List itemLayout="horizontal">
      <List.Item>
        <Link to={`/stores`}>切换店铺</Link>
      </List.Item>
      <List.Item>
        <Link to="">
          访问店铺
          <span className={classes.listItemSecondaryText}>{store.name}<RightOutlined/></span>
        </Link>
      </List.Item>
      <List.Item>
        <Link to={`/users/${user.id}/personal`}>管理账号<span className={classes.listItemSecondaryText}><RightOutlined/></span>
        </Link>
      </List.Item>
      <List.Item>
        <Link to="/logout">退出登录<PoweroffOutlined/></Link>
      </List.Item>
    </List>
  )

  return (
    <Popover placement="bottomLeft"
             overlayClassName={classes.userPopover}
             content={popoverContent}
             trigger="click"
             align={{ offset: [20, 0] }}>
      <Space align="center" className={classes.userInfo}>
        <Avatar size="small" src={user.avatar} icon={<UserOutlined/>}/>
        {user.nickname}
        <RightOutlined/>
      </Space>
    </Popover>
  )
}

export default function Dashboard() {
  const { storeId } = useParams()
  const [store, setStore] = useState(new Store())

  useEffect(() => {
    StoreServiceV1.getStore(storeId).then(setStore)
  }, [storeId])

  return (
    <div className={classes.root}>
      <Page.Header title={store.name} ghost={false}
                   tags={<Tag color="blue">Running</Tag>}
                   extra={<UserAvatar store={store}/>}/>
      <Page.Content className={classes.content}>
        <Row gutter={[16, 16]}>
          <Col span={24}>
            <TotalOverview/>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <TotalProductQuantity/>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <Card title="实时数据" size="small" extra={<Button type="link" size="small">数据中心</Button>}>
              <Row style={{ textAlign: "center" }} gutter={[0, 16]}>
                <Col span={8}>
                  <Statistic title="今日支付金额" value={0}/>
                </Col>
                <Col span={8}>
                  <Statistic title="今日访客数" value={0}/>
                </Col>
                <Col span={8}>
                  <Statistic title="今日订单数" value={0}/>
                </Col>
              </Row>
              <Row style={{ textAlign: "center" }}>
                <Col span={8}>
                  <Statistic title="今日支付买家数" value={0}/>
                </Col>
                <Col span={8}>
                  <Statistic title="今日浏览量" value={0}/>
                </Col>
              </Row>
            </Card>
          </Col>
        </Row>
      </Page.Content>
    </div>
  )
}
